<template>
  <div style="width: 100%; padding: 20px">
    <div class="layout">
      <div>
        <h2 style="margin-bottom: 20px; padding-left: 40px; font-size: 25px; font-weight: bold; color: cadetblue">电影榜单-top5</h2>
        <div class="class-recommend">
          <div class="class-info" v-for="(item, index) in data.film" :key="item.id" @click="goFilmDetail(item.id)" style="cursor: pointer;">
            <div style="display: flex;" class="class-item">
              <div style="padding-top: 10px">
                <div style="font-weight: bold; font-size: 18px; color: gold" v-if="index === 0">1</div>
                <div style="font-weight: bold; font-size: 18px; color: silver" v-else-if="index === 1">2</div>
                <div style="font-weight: bold; font-size: 18px; color: LightSalmon" v-else-if="index === 2">3</div>
                <div style="font-size: 18px; color: #333" v-else>{{ index + 1 }}</div>
              </div>
              <img :src="item.cover" alt="" style="height: 200px; width: 140px; border-radius: 5px" />
              <div style="flex: 1; color: #666; margin: auto;" >
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>名称：</strong>{{ item.name }}</div>
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>类型：</strong>{{ item.categoryName }}</div>
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>国家：</strong>{{ item.country }}</div>
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>片长：</strong>{{ item.duration }}</div>
                <div class="line3" style="margin-bottom: 8px; font-size: 15px;"><strong>剧情简介：</strong>{{ item.descr }}</div>
              </div>
              <span class="span-align" style="width: 80px;">
                <img style="width: 30px; height: 30px; border-radius: 50%; margin-right: 5px;" :src="item.userAvatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="">
                <span style="font-size: 16px; color: pink;">{{ item.userName }}</span>
                <span style="font-size: 15px; color: grey">大力推荐</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h2 style="margin-bottom: 20px; padding-left: 40px; font-size: 25px; font-weight: bold; color: cadetblue">电视剧榜单-top5</h2>
        <div class="class-recommend">
          <div class="class-info" v-for="(item, index) in data.series" :key="item.id" @click="goSeriesDetail(item.id)" style="cursor: pointer;">
            <div style="display: flex;" class="class-item">
              <div style="padding-top: 10px">
                <div style="font-weight: bold; font-size: 18px; color: gold" v-if="index === 0">1</div>
                <div style="font-weight: bold; font-size: 18px; color: silver" v-else-if="index === 1">2</div>
                <div style="font-weight: bold; font-size: 18px; color: LightSalmon" v-else-if="index === 2">3</div>
                <div style="font-size: 18px; color: #333" v-else>{{ index + 1 }}</div>
              </div>
              <img :src="item.cover" alt="" style="height: 200px; width: 140px; border-radius: 5px" />
              <div style="flex: 1; color: #666; margin: auto;" >
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>名称：</strong>{{ item.name }}</div>
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>类型：</strong>{{ item.categoryName }}</div>
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>国家：</strong>{{ item.country }}</div>
                <div style="margin-bottom: 8px; font-size: 15px;"><strong>集数：</strong>{{ item.episodes }}</div>
                <div class="line3" style="margin-bottom: 8px; font-size: 15px;"><strong>剧情简介：</strong>{{ item.descr }}</div>
              </div>
              <span class="span-align" style="width: 80px;">
                <img style="width: 30px; height: 30px; border-radius: 50%; margin-right: 5px;" :src="item.userAvatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="">
                <span style="font-size: 16px; color: pink;">{{ item.userName }}</span>
                <span style="font-size: 15px; color: grey">大力推荐</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  noticeList: [
    {color: null},
  ],
  film: [],
  series: [],
})

const goFilmDetail = (id) => {
  location.href = '/filmDetail?id=' + id
}

const goSeriesDetail = (id) => {
  location.href = '/seriesDetail?id=' + id
}

const getFilm = () => {
  request.get('/film/getFilmRecommend').then(res=>{
    if(res.data.length < 3){
      request.get('/film/selectRecommend/1').then(res => {
        data.film = res.data.slice(0,5)
      })
    }else{
      data.film = res.data
    }
  })
}
getFilm()

const getSeries = () => {
  request.get('/series/getSeriesRecommend').then(res=>{
    if(res.data.length < 3){
      request.get('/series/selectRecommend/1').then(res => {
        data.series = res.data.slice(0,5)
      })
    }
    data.series = res.data
  })
}
getSeries()

</script>

<style>
.layout{
  width: 100%;
  display: grid;
  grid-template-columns: 5fr 5fr;
}

.class-recommend{
  height: 800px;
  overflow-y: scroll;
}

.class-info{
  padding: 10px;
}

/* 隐藏垂直滚动条 */
.class-recommend::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, 0.3);
  cursor: pointer;
  border-radius: 5px;
}

.class-item{
  background-color: #fff;
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 20px;
  border: 2px solid #aaa;
  border-radius: 10px;
  padding: 20px;
}

</style>